<template>
  <view class="content">
    <view class="text-area">
      <text class="title">目前仅支持App端 蓝牙信标测试</text>
      <view @click="startBeaconDiscovery"><button type="primary">开始搜索iBeacon设备</button></view>
      <view @click="stopBeaconDiscovery"><button type="primary">停止搜索iBeacon设备</button></view>
      <view @click="getBeacons"><button type="primary">获取iBeacon设备</button></view>
    </view>

    <view>
      <view>---获取iBeacon设备列表---</view>
      <view>
        <view v-for="(itemA, indexA) in iBeaconListA" :key="indexA">
          <view>uuid:{{ itemA.uuid }}--设备的距离:{{ itemA.accuracy }}--设备的强弱:{{ itemA.rssi }}</view>
        </view>
      </view>
    </view>

    <view>
      <view>---搜索出的iBeacon设备及实时状态---</view>
      <view>
        <view v-for="(itemB, indexB) in iBeaconListB" :key="indexB">
          <view>uuid:{{ itemB.uuid }}--设备的距离:{{ itemB.accuracy }}--设备的强弱:{{ itemB.rssi }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iBeaconListA: [],
        iBeaconListB: []
      }
    },
    onLoad() {

    },
    methods: {

      //开始搜索iBeacon蓝牙信标
      startBeaconDiscovery() {
        console.log("开始扫描设备...");
        //输入需要监听的蓝牙信标列表
        let tthis = this,
          uuids = [
            '17320508-0756-8877-2935-274463415059'
          ];
        uni.startBeaconDiscovery({
          uuids: uuids,
          success(res) {
            console.log('startBeaconDiscovery', res);

            //监听 iBeacon 设备更新事件
            uni.onBeaconUpdate(function(res) {
              //console.log('onBeaconUpdate', res);
              tthis.iBeaconListB = res.beacons;
            });

            //监听 iBeacon 服务状态变化事件
            uni.onBeaconServiceChange(function(res) {
              console.log('onBeaconServiceChange', res);
            });

          }
        })
      },

      //获取iBeacon设备
      getBeacons() {
        let tthis = this;
        uni.getBeacons({
          success(res) {
            console.log('getBeacons', res);
            tthis.iBeaconListA = res.beacons;
          }
        })
      },

      //停止搜索iBeacon蓝牙信标
      stopBeaconDiscovery() {
        uni.stopBeaconDiscovery({
          success(res) {
            console.log('stopBeaconDiscovery', res);
          }
        })
      },





    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {}

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
